import React, { useState, useMemo } from "react";

// useMemo就是react里面的计算属性
// 缓存的是返回值
const App = () => {
  const [count, setCount] = useState(1);
  const [num, setNum] = useState(1);

  const [arr] = useState([1, 2, 3, 4, 5, 6, 7]);

  const sum = useMemo(() => {
    console.log("sum");
    let total = 0;
    for (let i = 0; i < count * 100; i++) {
      total += i;
    }
    return total;
  }, [count]);

  const oddArr = useMemo(() => {
    return arr.filter((item) => item % 2);
  }, [arr]);

  return (
    <>
      <h2>useMemo</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <p>sum: {sum}</p>

      <hr />

      <p>num: {num}</p>
      <button onClick={() => setNum((v) => v + 1)}>btn</button>

      <hr />

      <ul>
        {oddArr.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
